<script setup>
import { ref, onMounted } from 'vue'
import { sessionApi, loginApi, imgCodeApi } from '@/common/api'
import routes from '@/common/router'
import Note from '@/components/notify'
import Msg from '@/components/message'

// 挂载前判断用户是否登录，如果已登录，则直接跳转到主页
onMounted(() => {
  userInfo()
})

// userInfo 判断用户是否已经登录，如果已登录，则直接跳转到主页
const userInfo = async () => {
  const res = await sessionApi()
  if(res.code === 200) {
    routes.replace('/main')
  } else {
    localStorage.removeItem("token")
  }
}

// showCode 显示验证码
const codeShow = ref(false)
const showCode = () => {
  if(!codeShow.value) {
    imgCode()
    codeShow.value = true
  }
}

// imgCode 获取验证码
const imgStr = ref('')
const imgCode = async () => {
  const res = await imgCodeApi()
  if(res.code === 200) {
    imgStr.value = 'data:image/png;base64,' + res.data
  } else {
    Note({ kind: 'error', title: '失败', txt: res.msg })
  }
}

// loginForm 用户登录的账号及密码对象
const loginForm = ref({
  usname: 'sysadmin',
  passwd: '123456',
  chcode: ''
})

// login 用户登录方法
const login = async () => {
  const usname = loginForm.value.usname
  const passwd = loginForm.value.passwd
  const chcode = loginForm.value.chcode
  if(usname==='' || usname.length>50 || usname.length<2) {
    Msg({ kind: 'error', txt: '登录账号不能为空，且长度2-50之间！'})
    return
  }
  if(passwd==='' || passwd.length<6) {
    Msg({ kind: 'error', txt: '登录密码不能为空，且长度不小于6位！'})
    return
  }
  if(chcode==='' || chcode.length!==5) {
    Msg({ kind: 'error', txt: '请正确输入验证码！'})
    return
  }
  let str = chcode.split('')
  for(let i=0, c=str.length; i<c; i++) {
    if (str[i].charAt()>='A' && str[i].charAt()<='Z') {
      str[i] = str[i].toLowerCase();
    }
  }
  loginForm.value.chcode = str.join('')
  const res = await loginApi(loginForm.value)
  imgCode()
  if(res.code === 200) {
    loginForm.value.chcode = ''
    localStorage.setItem("token", res.data)
    Note({ kind: 'success', title: '成功', txt: '恭喜您，登录成功！' })
    routes.replace('/main')
  } else {
    Note({ kind: 'error', title: '失败', txt: res.msg })
  }
}
</script>

<template>
  <div class="a"> 
    <div class="b">
      <div class="c"><img src="@/assets/img/2.png" height="50" alt="Logo" /></div>
      <div class="d">
        <div class="e"><img src="@/assets/img/1.png" width="600" height="400" alt="info" /></div>
        <div class="f">
          <div class="g">请登录</div>
          <div class="h">
            <div class="i">账号</div>
            <div>
              <i class="iconfont person j"></i>
              <input type="text" v-model="loginForm.usname" maxlength="30" placeholder="请输入登录账号" class="k" @keyup.enter="login()" />
            </div>
            <div class="i">密码</div>
            <div>
              <i class="iconfont lock j"></i>
              <input type="password" v-model="loginForm.passwd" maxlength="30" placeholder="请输入登录密码" class="k" @keyup.enter="login()" />
            </div>
            <div class="i">验证码</div>
            <div>
              <i class="iconfont exclamationmark_shield j"></i>
              <input type="text" v-model="loginForm.chcode" maxlength="5" placeholder="请输入验证码" class="k" @focus="showCode()" @keyup.enter="login()" />
              <div v-if="codeShow" class="l" @click="imgCode()"><img :src="imgStr" alt="点击换一个" class="img m" /></div>
            </div>
            <div class="n" @click="login()">登　　录</div>
          </div>
        </div>
      </div>
      <div class="o">Copyright &copy; 2023-2024 优佰通（ubiton.cn）</div>
    </div>
  </div>
</template>

<style scoped>
.a {height: 100%; overflow: hidden; background-image: url(@/assets/img/0.gif);}
.b {width: 1050px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.c {height: 50px; text-align: center;}
.d {width: 1050px; background-color: #FFF;  border-radius: 5px; margin: 20px 0; display: flex; display: -webkit-flex}
.e {width: 600px; border-right: 1px solid #218BCC;}
.f {width: 449px; padding-top: 30px;}
.g {text-align: center; font-size: 20px; color: #333; letter-spacing: 20px;}
.h {padding: 20px 60px 0 60px;}
.i {padding-top: 15px;}
.j {position: absolute; margin: 13px 10px 0 14px; font-size: 22px; color: #666;}
.k {width: 285px; height: 40px; padding-left: 40px; font-size: 16px;}
.k:focus {border: 1px #409EFF solid;}
.l {width: 100px; height: 42px; position: absolute; margin: -43px 0 0 227px; cursor: pointer;}
.m {border-radius: 0 4px 4px 0;}
.n {padding: 10px 15px; margin-top: 20px; color: #FFF; background-color: #409EFF; border: 0; border-radius: 5px; cursor: pointer; text-align: center; font-size: 18px;}
.n:hover {background-color: #66B1FF;}
.o {height: 30px; line-height: 30px; text-align: center; color: #666;}
</style>
